<template>
  <view>
    <!-- 1.0搜索框 -->
    <search></search>
    <!-- 2.0轮播图 -->
    <swiper
      class="swiper"
      indicator-dots="true"
      indicator-color="rgba(255, 255, 255, .5)"
      indicator-active-color="#EA4350"
      autoplay="true"
      interval="1000"
      circular="true"
    >
      <swiper-item v-for="item in swiperData" :key="item.goods_id">
        <navigator :url="item.navigator_url" :open_type="item.open_type">
          <image class="swiper_item" :src="item.image_src" />
        </navigator>
      </swiper-item>
    </swiper>
    <!-- 3.0分类 -->
    <view class="entry">
      <navigator
        v-for="item in entryData"
        :key="item.name"
        :url="item.navigator_url"
        :open-type="item.open_type"
      >
        <image class="entry_item" :src="item.image_src" :alt="item.name" />
      </navigator>
    </view>
    <!-- 4.0楼层 -->
    <view class="floor" v-for="(item, index) in floorData" :key="index">
      <view class="floor_img">
        <image class="floor_img_item1" :src="item.floor_title.image_src" />
      </view>
      <view class="floor_list">
        <!-- 把图片处理成同级，方便后期列表渲染 -->
        <navigator
          v-for="item in item.product_list"
          :key="item.name"
          class="floor_list_item"
          :url="item.navigator_url"
          :open-type="item.open_type"
        >
          <image
            class="floor_list_image"
            :src="item.image_src"
            :style="'width:' + item.image_width + 'rpx'"
          />
        </navigator>
      </view>
    </view>
  </view>
</template>

<script>
import search from "@/components/search/index";
export default {
  data() {
    return {
      swiperData: [],
      entryData: [],
      floorData: [],
    };
  },
  components: {
    search,
  },
  onLoad() {
    // 调用轮播图数据
    this.getswiperData();
    // 分类
    this.getentryData();
    // 楼层
    this.getfloorData();
  },
  methods: {
    // 轮播图
    async getswiperData() {
      // 返回值已经通过响应拦截器处理过.可使用到直接数据,通过await获取到数据直接赋值调用
      this.swiperData = await this.$https.get("home/swiperdata");
    },
    // 分类
    async getentryData() {
      this.entryData = await this.$https.get("home/catitems");
    },
    // 楼层
    async getfloorData() {
      this.floorData = await this.$https.get("home/floordata");
    },
  },
};
</script>

<style lang="less">
.swiper {
  width: 750rpx;
  height: 340rpx;
  .swiper_item {
    width: 750rpx;
    height: 340rpx;
  }
}
.entry {
  width: 750rpx;
  height: 140rpx;
  margin-top: 20rpx;
  margin-bottom: 10rpx;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  .entry_item {
    width: 128rpx;
    height: 140rpx;
  }
}
.floor {
  overflow: hidden;
  .floor_img {
    width: 750rpx;
    height: 60rpx;
    margin-top: 50rpx;
    margin-bottom: 10rpx;
    .floor_img_item1 {
      width: 750rpx;
      height: 60rpx;
    }
  }
  .floor_list {
    overflow: hidden;
    .floor_list_item {
      // 浮动实现环绕效果
      float: left;
      &:nth-child(1) image {
        height: 386rpx;
      }
    }
    .floor_list_image {
      display: block;
      width: 232rpx;
      height: 188rpx;
      margin-left: 14rpx;
      margin-bottom: 10rpx;
    }
  }
}
</style>
